<template>
  <div id="divBox1">
    <el-card class="box-card" shadow="never" v-loading="loading">
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        size="mini"
      >
        <el-table-column prop="id" label="订单ID" align="center">
        </el-table-column>
        <el-table-column
          prop="snkey"
          label="订单编号"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="title" label="订单信息" align="center" width="200">
        </el-table-column>
        <el-table-column prop="flux" label="总流量(GB)" align="center">
        </el-table-column>
        <el-table-column prop="money" label="总支付金额" align="center">
        </el-table-column>
        <el-table-column prop="status" label="支付状态" align="center">
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间" align="center" width="200">
            <template slot-scope="scope">
                {{scope.row.payTime ? scope.row.payTime : '-'}}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-if="scope.row.status == '待支付'"
              size="mini"
              @click="uppayment(scope.row)"
              >再次支付</el-button
            >
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top:10px">
        <el-col align="right">
          <el-pagination
            :page-sizes="[10, 20, 40, 100]"
            :page-size="size"
            :current-page="current"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      title="请使用微信扫码支付"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible3"
      @close="quxiaofuzhi"
      width="350px"
      class="fanganid"
    >
      <div id="qrCode" ref="qrCodeDiv"></div>
    </el-dialog>
  </div>
</template>
<script>
import { getFluxList, getFluxPacket, getFluxPay } from "@/api/flow.js";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      list: [],
      loading: false,
      current: 1,
      size: 10,
      total: 0,
      dialogVisible3: false,
      zhicode: null,
      orderId: "",
      codeUrl: "",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    //分页
    pageChange(page) {
      this.current = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getlist();
    },
    //再次支付
    uppayment(row) {
      this.orderId = row.id;
      getFluxPay(this.orderId).then((res) => {
        this.codeUrl = res.payinfo;
        this.dialogVisible3 = true;
        this.$nextTick(function () {
          this.bindQRCode();
        });
        setTimeout(() => {
          this.zhifuzhuang();
        }, 3000);
      });
    },
    //查询支付状态
    zhifuzhuang() {
      this.zhicode = setInterval(() => {
        getFluxPacket(this.orderId).then((res) => {
          console.log("res111", res);
          if (res.status == "已支付") {
            this.$message({
              message: "支付成功",
              type: "success",
              duration: 2000,
            });
            this.dialogVisible3 = false;
            clearInterval(this.zhicode);
            this.getlist();
          }
        });
      }, 3000);
    },
    //二维码
    bindQRCode: function () {
      document.getElementById("qrCode").innerHTML = "";
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.codeUrl,
        width: 300,
        height: 300,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
    getlist() {
      this.loading = true;
      let parmas = {
        current: this.current,
        size: this.size,
      };
      getFluxList(parmas)
        .then((res) => {
          this.loading = false;
          this.list = res.records;
          this.total = res.total;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    quxiaofuzhi() {
      this.dialogVisible3 = false;
      clearInterval(this.zhicode);
    },
  },
};
</script>
<style lang="scss">
    #divBox1{
        margin-bottom: 20px;
        .el-table--mini th, .el-table--mini td{
            padding: 10px 0;
        }
    }
</style>